<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<style>
    .material-icons{
        font-size: 72px;
        color: pink;
    }
    .material-icons.num{
        color: pink;
        font-size: 54px;
    }
    .material-icons.num1{
        color: red;
        font-size: 54px;
    }

    .fab{
        width: 72px;
        height: 400px;
        position: fixed;
        right: 50px;
    }
    .fab-btn{
        position: fixed;
        display: flex;
        right: 50px;
    }
    .fab-menu{
        position: fixed;
        display: flex;
        flex-direction: column;
        right: 62px;
        top: 80px;
    }

</style>
<body>
<div class="fab">
    <div class="fab-btn">
        <a href=""><i class="material-icons" id="first">account_circle</i></a>
    </div>
    <div class="fab-menu" style="display: none">
        <a href=""><i class="material-icons num">fingerprint</i></a>
        <a href=""><i class="material-icons num">mediation</i></a>
        <a href=""><i class="material-icons num1">settings_bluetooth</i></a>

    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {

        $("#first").mouseenter(function () {
            $("#first").text("remove_circle");
            $(".fab-menu").fadeIn(200);
            $("#first").animate({"rotate":"180deg"},200);
        })
        $(".fab").mouseleave(function () {
            $("#first").text("account_circle");
            $(".fab-menu").fadeOut(200);
            $("#first").animate({"rotate":"0deg"},200);
        })



    })
</script>
</body>
</html>